/**
 * @author phi
 */

(function(){ "use strict"; })();

/*
 * Style
 */
TM.loadScript("dom", "dom", function(){
    
    var Element = TM.DOM.Element;
    
    /**
     * アニメーションクラス.
     * DOMElement の animation プロパティと連携してアニメーションを表現します.
     * @lends   TM.DOM.Animation.prototype
     */
    var Animation = TM.DOM.Animation = TM.createClass({
        
        element: null,
        
        /**
         * @constructs
         * @see <a href="./../../test/dom/animation-test.html">Test Program</a>.
         */
        init: function(element) {
            this.element = element;
            
            // アニメーションが終了したら ステートを "paused" にする.(何度も再生できるようにする為)
            var self = this;
            this.element.addEventListener("webkitAnimationEnd", function(){
                self.stop();
            }, false);
        },
        
        
        setProperty: function(prop) {
            if (typeof prop == "string") {
                this.element.style["webkitAnimation"] = prop;
            }
            else {
                for (var key in prop) {
                    var fn = ANIM_SETTER_FUNC_NAME_MAP[key];
                    var value = prop[key];
                    fn.call(this, value);
                }
            }
            return this;
        },
        
        setName: function(name) {
            this.element.style["webkitAnimationName"] = name;
            return this;
        },
        
        setDuration: function(s) {
            this.element.style["webkitAnimationDuration"] = s;
            return this;
        },
        
        setTimingFunction: function(func) {
            this.element.style["webkitAnimationTimingFunction"] = func;
            return this;
        },
        
        setIterationCount: function(n) {
            this.element.style["webkitAnimationIterationCount"] = n;
            return this;
        },
        
        setDelay: function(s) {
            this.element.style["webkitAnimationDelay"] = s;
            return this;
        },
        
        /**
         * 判定再生させるかどうかを指定
         * "normal" or "alternate"
         */
        setDirection: function(t) {
            this.element.style["webkitAnimationDirection"] = t;
            return this;
        },
        
        start: function() {
            this.element.style["webkitAnimationPlayState"] = "running";
            return this;
        },
        
        stop: function() {
            this.element.style["webkitAnimationPlayState"] = "paused";
            return this;
        },
    });
    
    var ANIM_SETTER_FUNC_NAME_MAP = {
        // 小文字対応
        "name"          : Animation.prototype.setName,
        "duration"      : Animation.prototype.setDuration,
        "timingFunction": Animation.prototype.setTimingFunction,
        "iterationCount": Animation.prototype.setIterationCount,
        "delay"         : Animation.prototype.setDelay,
        
        // 大文字対応
        "Name"          : Animation.prototype.setName,
        "Duration"      : Animation.prototype.setDuration,
        "TimingFunction": Animation.prototype.setTimingFunction,
        "IterationCount": Animation.prototype.setIterationCount,
        "Delay"         : Animation.prototype.setDelay,
    };
    
    /**
     * スタイルクラス
     * @name    anim
     * @fieldof TM.DOM.Element.prototype
     * @type    TM.DOM.Animation
     */
    Element.prototype.getter("anim", function(){
        return this._anim || ( this._anim = Animation(this.element) );
    });
    
    
    console.assert(!TM.$DOMAnim, "名前が競合しています!!", "$DOMAnim");
    /**
     * TM.DOM.Animation の alias.
     * short hand としてお使いください.
     */
    TM.$DOMAnim = TM.DOM.Animation;
    
});


